class cartlist{
    constructor(){
        this.getData();
        this.islogin();
        this.bindEve();
    }
    // 事件绑定的方式
bindEve(){
    // 给全选按钮绑定事件
    this.$('.tro_tab_check_p').addEventListener('click',this.allCheckFn)
    // console.log( this.$('.tro_tab_check_p'))

    // 将单个商品的所有点击操作，委托给自己的父级
    this.$('.tro_tab_h2').addEventListener('click',this.dispatch.bind(this))
}
// 全选按钮的方法
allCheckFn=(eve)=>{
    // console.log(111)
    // 获取全选按钮的状态
    let tar=eve.target;
    // console.log(tar.checked);
    // 让单个商品跟随全选的状态
    this.oneGoodStatus(tar.checked)

}
// 单选按钮的
oneGoodStatus(s){
    this.$('.tro_tab_check_p1').forEach(input=>{
        // console.log(input)
        input.checked=s;
    })
}


// 事件委托
dispatch(eve){
    // console.log(eve.target);
    // 通过class选出 单个商品的input
    if(eve.target.classList.contains('tro_tab_check_p1'))this.oneGoodChecked(eve.target);
}
oneGoodChecked(tar){
    // console.log(tar);
    // 判断单个商品状态是取消，则全选直接取消
    if(!tar.checked)this.$('.tro_tab_check_p').checked=false;
    if(tar.checked){
        // console.log(this.$('.tro_tab_check_p1'));
        // 将伪数组，转化为真数组
    let res= [...this.$('.tro_tab_check_p1')].some(input=>!input.checked);
    // console.log(res);
    // res为false时，说明页面的都被选中
    if(!res)this.$('.tro_tab_check_p1').checked=true;
    }
}



    // 判断是否登录
    islogin(){
        let id=localStorage.getItem('user_id');
        if(!id)location.href='./login.html?returnUrl=./cartlist.html'
    }


    // 获取购物车数据
    async getData(){
        let data=await axios.get('http://localhost:8888/cart/list',{
            id:localStorage.getItem('user_id')
        });
        if(!data)return;
        let{code,cart}=JSON.parse(data);
        // console.log(code,cart);
        if(code==1){
            // console.log(cart);
            let html="";
            cart.forEach((goods) => {
                html+=
                `
                <div class="tro_tab_h2">
                    <div class="col tro_tab_check">
                        <input type="checkbox" class="tro_tab_check_p1"></input>
                        <span class="tro_tab_check_sp"></span>
    
                    </div>
                    <div class="col tro_tab_img">
                        <img src="${goods.img_small_logo}" alt="">
    
                    </div>
                    <div class="col tro_tab_name">
                    <!--<h2 tro_tab_name_h2>${goods.title}</h2>-->
                   <li class="tro_tab_name_li1">小米电视4A 32英寸 黑色 32英寸</li>
                   <li class="tro_tab_name_li2">${goods.goodstitle}</li>
    
                    </div>
                    <div class="col tro_tab_price">
                        <span  id="price">${goods.price}</span><span>元</span>
                    </div>
                    <div class="col tro_tab_num">
                        <a class="tro_tab_num_p1" id="subtract" href="javascript:;">-</a>
                        <input type="text" value="${goods.cart_number}" id="num">
                        <a class="tro_tab_num_p2" id="plus" href="javascript:;">+</a>
                    </div>
                    <div class="col tro_tab_total "><span class="tro_tab_total_value" id="prices" >${parseInt((goods.price*goods.cart_number)*100)/100}</span>元
    
                    </div>
                    <div class="col tro_tab_action">x</div>
    
                </div>
                `
            });
           
            // console.log(html);
            this.$('.tro_tab_h2').innerHTML=html;

        }

        if(code==401){
           location.href='../html/login.html?returnUrl=../html/cartlist.html';
        }

    }
    $(eve){
      let res= document.querySelectorAll(eve);
       return res.length==1?res[0]:res;
    }
}
new cartlist();